<template>
  <div>
    <a-form layout="vertical" v-if="FieldKey != -1" :model="form">
      <a-form-item label="字段标识">
        <a-input
          disabled
          placeholder="请输入字段标识"
          v-model="form[FieldKey].model"
        />
      </a-form-item>
      <a-form-item label="字段名称">
        <a-input
          allow-clear
          @change="FieldNames($event, form[FieldKey].model, FieldKey)"
          placeholder="请输入字段名称"
          v-model="form[FieldKey].wrapper.label"
        />
      </a-form-item>
      <a-form-item label="占位内容">
        <a-input
          allow-clear
          placeholder="请输入占位内容"
          v-model="form[FieldKey].customize.placeholder"
        />
      </a-form-item>
      <a-form-item label="字段类型">
        <a-select
          v-model="form[FieldKey].type"
          @change="
            FieldsType(
              $event,
              FieldKey,
              form[FieldKey].model,
              form[FieldKey].wrapper.label
            )
          "
        >
          <a-select-option value="input">文本框</a-select-option>
          <a-select-option value="textarea">文本域</a-select-option>
          <a-select-option value="number">数字输入框</a-select-option>
          <a-select-option value="select">下拉选择器</a-select-option>
          <a-select-option value="switch">switch开关</a-select-option>
          <a-select-option value="date">日期选择框</a-select-option>
          <a-select-option value="upload">上传</a-select-option>
          <a-select-option value="autoComplete">自动补全</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="选项配置" v-if="form[FieldKey].type == 'select'">
        <a-radio-group
          default-value="1"
          v-model="groupData"
          button-style="solid"
        >
          <a-radio-button value="1">静态数据</a-radio-button>
          <a-radio-button value="2">动态数据</a-radio-button>
        </a-radio-group>
        <div v-show="groupData === '1'">
          <div
            v-for="(e, i) in form[FieldKey].customize.options"
            :FieldKey="i"
            :key="i"
            style="display: flex; align-items: center"
          >
            <a-input placeholder="名称" v-model="e.label" style="margin: 5px" />
            <a-input placeholder="值" v-model="e.value" style="margin: 5px" />
            <a-icon
              type="delete"
              class="deleteIcon"
              @click="form[FieldKey].customize.options.splice(i, 1)"
            />
          </div>
          <a-button
            type="link"
            @click="addOptions(form[FieldKey].customize.options)"
          >
            添加
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groupData: "1"
    };
  },
  props: {
    FieldKey: {
      type: Number,
      default: -1
    },
    form: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    FieldNames(el, value, index) {
      this.$emit("FieldNames", el, value, index);
    },
    RemoveField(index) {
      this.$emit("RemoveField", index);
    },
    FieldsType(value, key, model, label) {
      this.$emit("FieldsType", value, key, model, label);
    },
    // 添加选项
    addOptions(options) {
      options.push({
        value: options.length + 1,
        label: `选项${options.length + 1}`
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
